import React, { Component } from 'react'
import axios from 'axios'
import style from './index.module.css'
import Message from './message'
import HighCom from '../06高阶组件'
class Select extends Component{
    state={
        list:[],
        nav:[],
        sub:[],
        defaultIndex:0,
        isShow:false
    }


    setActive = key =>{

        const {list} = this.state;

        let sub = [];
        if(key === 0){

            sub = list.map(item=>item.sub).reduce((pre,next)=>[...pre,...next])

            // list.forEach(i=>i.sub.forEach(j=>sub.push(j)))
        }
        else{

            sub = list[--key].sub;   

        }
        this.setState({defaultIndex:++key,sub:sub})
    }

    // 控制弹层显示隐藏的函数
    setIsshow = () => this.setState({isShow:!this.state.isShow})

    // 子组件点击确定进行添加一个分类
    addClass = name => {

        axios.post('/add/class',{name}).then(data=>{
            if(data.data.code === 1){

                let nav = data.data.data.map(item=>item.class);
                nav.unshift("全部");
                console.log(nav)

                this.setState({
                    list:data.data.data,
                    nav
                })

                // 关闭弹层
                this.setIsshow()
            }
            

        })


    }

    render(){
        const {nav,defaultIndex,sub,isShow} = this.state;
        return <div>
            <div>
                <button onClick={this.setIsshow}>添加分类</button>
            </div>
            {/* 选项卡按钮 */}
            <div className={style.nav_out}>
                {
                    nav.map((item,key)=>{
                        return <span onClick={()=>this.setActive(key)} className={[style.nav,defaultIndex===key?style.active:null].join(' ')} key={key}>{item}</span>
                    })
                }
            </div>
            {/* 列表 */}
            <div className={style.list}>
                {
                    sub.map(jtem=>{
                            return jtem.table.map((ktem,key)=>{
                                return <div className={[style.unit,ktem.isBusiness===1?style.gray:style.blue].join(' ')} key={key}>
                                        <h2>{jtem.name}</h2>  
                                        <p>{ktem.num}号桌</p>
                                        <p>{ktem.isBusiness===1?'空闲':ktem.expense}</p>
                                </div>
                            })

                        })
                }
            </div>
            {/* 弹层 */}
            {
                isShow?<Message setIsshow={this.setIsshow} addClass={this.addClass}/>:null
            }
        </div>
    }

    componentDidMount(){
        // 页面初始化请求数据
        axios.get('/select/list').then(data=>{

            let nav = data.data.data.map(item=>item.class);
                nav.unshift("全部");

            let sub = data.data.data.map(item=>item.sub).reduce((pre,next)=>[...pre,...next])
            
            // data.data.data.forEach(i=>i.sub.forEach(j=>sub.push(j)))

            this.setState({
                list:data.data.data,
                nav,
                sub
            })

            
        })
    }
}

export default HighCom(Select)